<template>
	<view>
		<view class="head-address1" @click="$refs.popup.open()">
			<view style="color: #999; font-size: 30rpx;" v-if="addressList == ''">
				<text>暂无地址，点此添加地址</text>
			</view>
			<view class="address-box" v-else>
				<text class="adres-txt-1" v-show="addressInfo.is_default == 1">默认</text>
				<text class="adres-txt-2">{{ addressInfo.provinces + addressInfo.citys + addressInfo.areas }}</text>
				<view class="adres-txt-3">{{ addressInfo.address }}</view>
				<text class="adres-txt-4">{{ addressInfo.accept_name }}</text>
				<text class="adres-txt-5">{{ addressInfo.mobile }}</text>
			</view>
			<uni-icons type="right" size="26"></uni-icons>
		</view>
		<view class="cart-list">
			<view class="cart-list-box">
				<view class="list-box-head">
					<image src="../../static/cart/store.png" mode=""></image>
					<text>国集采供应链</text>
					<u-icon name="arrow-right" size="12" style="margin: 4rpx 0 0 4rpx;"></u-icon>
				</view>
				<view class="list-box-cont" v-for="item,index in proList" :key="item.id">
					<view class="listbox-cont-left">
						<image :src="baseUrl + item.img"></image>
					</view>
					<view class="listbox-cont-right">
						<view class="cont-right-top">
							<view class="cont-tit">{{ item.name }}</view>
							<view class="cont-spec">规格参数：{{ item.specs }}</view>
						</view>
						<view class="cont-right-bot">
							<view class="cont-price-box">
								<text class="price-icon">￥</text>
								<text class="price-tit">{{ item.sell_price }}</text>
							</view>
							<view style="color: #999;font-size: 26rpx;margin-top: 10rpx;">x {{ item.count }}</view>
						</view>
					</view>
					
				</view>
				<view class="list-box-cont" v-for="item,index in gooList" :key="item.id">
					<view class="listbox-cont-left">
						<image :src="baseUrl + item.img"></image>
					</view>
					
					<view class="listbox-cont-right">
						<view class="cont-right-top">
							<view class="cont-tit">{{ item.name }}</view>
						</view>
						<view class="pro-detai-bot" v-if="item.is_delivery_fee == '1'">
							免运费
						</view>
						<view class="pro-detai-bot" v-else>
							<text>商品运费：单件运费 ￥{{ item.delivery_money }} 元; {{ item.free_delivery_num }} 件起免运费</text>
						</view>

						<view class="cont-right-bot">
							<view class="cont-price-box">
								<text class="price-icon">￥</text>
								<text class="price-tit">{{ item.sell_price }}</text>
							</view>
							<view style="color: #999;font-size: 26rpx;margin-top: 10rpx;">x {{ item.count }}</view>
						</view>

					</view>
					
				</view>
				

			</view>
		</view>
		
		<!-- 选择其他服务的费用-->
		<view class="pay-box">
					<view class="wx-box">
						<view class="wx-pay">
							<text style="font-size: 12px;color:#f18b49;" >运费:<text>￥{{total_delivery_fee}}</text></text>
						</view>
					
					</view>
					<view class="wx-box">
						<view class="wx-pay">
							<text style="font-size: 12px;color:#f18b49;" >是否安装:<text>￥{{install_fee}}</text></text>
						</view>
						<radio-group >
							<radio    color="#f18b49" :class="active ==  '1' ? 'checked' : ''" :checked="active == 1"  @click="radioChangeB('1')"/>
						</radio-group>
					</view>
					
					<view class="wx-box">
						<view class="wx-pay">
							<text   style="font-size: 12px;color:#f18b49;" >是否出发票：<text>(税金：￥{{tax_money}})</text></text>
						</view>
						<radio-group  >
							<radio   color="#f18b49" :class="aaa ==  '4' ? 'checked' : ''" :checked="aaa == 4"  @click="radioChangeC('4')" />
						</radio-group>
					</view>
					<view class="wx-box">
						<view class="wx-pay">
							<input v-model="invoice"  v-show="invoice!=''"  placeholder="请选择抬头" class="wx-pay" placeholder-style="font-size: 12rpx; color: #ccc;"    disabled />
						</view>
					</view>
					
		
		<!--选择开票抬头-->
			<u-picker :show="showInvoice" :columns="columnInvoice" keyName="label" @change="changeInvoice" closeOnClickOverlay
				@close="radioChangeC('4')" @cancel="radioChangeC('4')" @confirm="confirmInvoice" confirmColor="#f18b49"></u-picker>
		</view>
		
		<view class="msg-box">
			<text style="margin-right: 30rpx; flex-shrink: 0;">备注:</text>
			<input v-model="message" placeholder="备注你的其他需求" placeholder-style="font-size: 26rpx;"
				style="width: 630rpx;margin-top: 4rpx; font-size: 28rpx; padding: 6rpx 0;" />
		</view>
		<view class="pay-box">
			<view class="wx-box" v-for="(item,index) in payList" :key="index">
				<view class="wx-pay">
					<image :src="item.img" mode=""></image>
					<text>{{ item.name }}</text>
				</view>
				<radio-group @change="radioChange($event,item.payId)">
					<radio :value="item.name" :checked="item.name === activeRadio" color="#f18b49" />
				</radio-group>
			</view>
		</view>

		<view class="bot-btn">
			<view class="bot-left">
				<text style="font-size: 24rpx;">￥</text>
				<text class="left-txt-1">{{ price }}</text>
			</view>
			<view class="bot-rigth">
				<text @click="submitOrder()">提交订单</text>
			</view>
		</view>
		<uni-popup type="bottom" ref="popup" background-color="#ffffff">
			<view class="up-class">
				<u-empty v-if="addressList == ''" mode="address" iconColor="#f18b49" text="点击下方按钮添加"
					style="padding: 50rpx 0;"></u-empty>
				<view v-else v-for="(item,index) in addressList" :key="index">
					<view class="head-address">
						<view class="address-box" @click="clickAddress(item.id)">
							<text class="adres-txt-1" v-show="item.is_default == 1">默认</text>
							<text class="adres-txt-2">{{ item.provinces + item.citys + item.areas }}</text>
							<view class="adres-txt-3">{{ item.address }}</view>
							<text class="adres-txt-4">{{ item.accept_name }}</text>
							<text class="adres-txt-5">{{ item.mobile }}</text>
						</view>
						<uni-icons type="compose" size="24" @click="edit(item.id)"></uni-icons>
					</view>
					<u-divider hairline dashed style="margin: 0;"></u-divider>
				</view>
				<view class="bot-btn">
					<view class="btn-box" @click="newAdd()">
						<uni-icons type="plusempty" color="#FFFFFF"></uni-icons>
						<text>添加收货地址</text>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checkedShow: false,
				price: 0,
				price1: 0, 
				data: [],
				userId: '',
				tax_money: 0, //税费
				install_fee: 0,//安装费
				buy_count:0,//购买数量
				message: '',
				proList: [],
				gooList: [],
				checkedId: 21,
				orderList: [],
				orderList2: [],
				addressInfo: {},
				invoiceInfo:{},//发票抬头
				showInvoice:false,//展示 选择开票抬头
				columnInvoice:[],//选择开票抬头
				invoice:'',//抬头
				invoice_id:0,//抬头id
				total_delivery_fee:0,//运费
				getChoose: [],
				checkedList: [],
				active:null,
				aaa:null,
				freeNum:1,
				objList:[
					{tit:'是否安装',},
				 	{tit:'是否出发票', },
				],
				
				addressList: [],
				payOtherChooes: ['是否安装', '是否出发票'], //下单时是否需要安装，发票
				activeRadio: '线下支付',
				payList: [
					//{ img: '../../static/cart/wxPay.png', name: '微信支付',payId: 15},
					// { img: '../../static/cart/aliPay.png', name: '支付宝',payId: 14},
					{
						img: '../../static/cart/payMent.png',
						name: '账期支付',
						payId: 22
					},
					{
						img: '../../static/cart/offLine.png',
						name: '线下支付',
						payId: 21
					}
				],
				baseUrl: 'https://gjc.hy-dzsc.cn/'
			}
		},
		onLoad(e) {
			this.data = e.data
			this.userId = e.userId
			this.getProInfo()
	
		},
		onShow() {
			this.getAddressInfo()
			this.getAddress()
			this.getInvoiceInfo()
		},
		watch:{
					price:{
						handler:function(newvalue){
							 
						},
						immediate:true,
					}
				},
		methods: {
			// 选择下单地址
			clickAddress(id) {
				this.$getHttp(`/gjcApi/getAccountAdd?user_id=${this.userId}&id=${id}`, {}, res => {
					res.forEach(v => {
						this.addressInfo = v
					})
					this.$refs.popup.close()
				})
			},
			
			// 获取全部地址
			getAddress() {
				this.$getHttp(`/gjcApi/address?user_id=${this.userId}`, {}, res => {
					this.addressList = res
				})
			},
			
			// 获取默认地址信息
			getAddressInfo() {
				this.$http(`/gjcApi/getAccountAdd?user_id=${this.userId}`, {}, res => {
					res.forEach(v => {
						this.addressInfo = v
					})
				})
			},
			
			//获取抬头信息
			getInvoiceInfo(){
				return new Promise(resolve => {
				this.$getHttp(`/gjcApi/invoice_list?user_id=${this.userId}`,{},res=>{
					 if(res.code == 200){
						 let arr = [{
						 	label: '请选择',
						 	id: '1'
						 }]
						 let invoiceList = []
						 invoiceList = res.data
						 invoiceList.forEach(v => {
						 	const obj = {
						 		label: v.company_name,
						 		id: v.id
						 	}
						 	arr.push(obj)
							this.columnInvoice.splice(0, 1, arr)
						 })
						 console.log(this.columnInvoice )
						 resolve()
					 }
				})
				})
			},
			
			//选择发票抬头
			changeInvoice(e){
				this.columnInvoice.splice(e.columnIndex + 1,  {
					label: '请选择抬头',
					id: '1'
				})
				this.getInvoiceInfo(e.value[e.columnIndex].id)
			},
			
			//确认发票抬头
			confirmInvoice(e){
				
				let success = true
				e.indexs.forEach(v => {
					if (v === 0) {
						success = false
					}
				})
				if(!success){
					uni.showToast({
						title:'请选择抬头！',
						duration:2000,
						icon:'none'
					})
				}else{
						let invoice = ""
						let invoice_id = []
						e.value.forEach(v => {
							invoice += v.label
							invoice_id.push(v.id)
						})
						this.invoice = invoice
						this.showInvoice = false
				}
			
			},
			
			// 获取订单信息
			getProInfo() {
				this.$http('/gjcApi/estimatePrice', {
					data: this.data
				}, res => {
					this.price = res.sum.toFixed(2)
					//debugger
					//console.log(res.goo[0]['count'])
					if(res.goo[0]['count']<res.goo[0]['free_delivery_num']){	//购买数量小于免邮数量	
						let a = parseFloat(res.total_delivery_fee )
						let b = parseFloat( this.price)
						this.price = (a+b ).toFixed(2)
					}
					this.install_fee = res.install_fee
					this.tax_money = res.tax_money
					this.total_delivery_fee = res.total_delivery_fee
					res.goo.forEach(v => {
						this.gooList.push(v) 
						

					})
					res.pro.forEach(v => {
						this.proList.push(v)
					})
				})
			},
			
			// 提交订单
			submitOrder() {
				
				this.gooList.forEach(v => {
					let json = {}
					json.id = v.id
					json.count = v.count
					json.type = v.types
					json.is_delivery_fee = v.is_delivery_fee
					json.is_tax = v.is_tax
					json.install_fee = v.install_fee //安装费
					this.orderList.push(json)
					
				})
				
				this.proList.forEach(v => {
					let json = {}
					json.id = v.id
					json.count = v.count
					json.type = v.types
					json.is_delivery_fee = v.is_delivery_fee
					json.is_tax = v.is_tax
					json.install_fee = v.install_fee
					this.orderList.push(json)
				})
				const data = {
					direct_gid: 0,
					direct_type: '',
					direct_num: 1,
					radio_address: this.addressInfo.id,
					delivery_id: 1,
					invoice_id:this.invoice_id,
					//taxes:this.tax_rate,
					// install_fee:this.install_fee,
					payment: this.checkedId,
					// message: this.message,
					goodsList: this.orderList,
				}
				this.$http('/gjcApi/cart3?user_id=' + this.userId, {
					data: JSON.stringify(data)
				}, res => {
					uni.showLoading({
						title: res.msg,
						mask: true
					})
					if (res.code == 200) {
						setTimeout(() => {
							uni.hideLoading()
							uni.redirectTo({
								url: `/pages/my/order/all-order?userId=${this.userId}&current=0`
							})
						}, 2000)
					}else{
						
						return false;
					}
					// if (res.code == 201 || res.code == 202) { //201：线下支付   202：月结
					// 	uni.showLoading({
					// 		title: '订单生成中',
					// 		mask: true
					// 	})
					// 	setTimeout(() => {
					// 		uni.hideLoading()
					// 		uni.redirectTo({
					// 			url: `/pages/my/order/all-order?userId=${this.userId}`
					// 		})
					// 	}, 1000)

					// } else if (res.code == 200) { //微信支付
					// 	this.$http('/block/doPay?order_id=' + res.order_id, {}, res1 => {
					// 		uni.redirectTo({
					// 			url: '/pages/index/webview?url=' + res1
					// 		})
					// 	})
					// }
				})
			},
			radioChange(e, id) {
				this.activeRadio = e.detail.value
				this.checkedId = id
			},
			// 跳转编辑地址
			edit(id) {
				uni.navigateTo({
					url: '/pages/my/address/edit-address?id=' + id + '&userId=' + this.userId
				})
			},
			// 跳转添加地址
			newAdd() {
				uni.navigateTo({
					url: '/pages/my/address/new-address?userId=' + this.userId
				})
			},
			//单选框
			checkedRadio(item) {
				if (this.checkedList.includes(item)) {
					const index = this.checkedList.indexOf(item)
					this.checkedList.splice(index, 1)
				} else {
					this.checkedList.push(item)
				}
			},
			
			//点选安装费，
			  radioChangeB(evt){
				    let a = parseFloat(this.price);
					let b = parseFloat(this.install_fee);

			      if (this.active == 1) { // 如果已经选中，则取消选中
								this.active	 = null;
								this.price   =(a - b).toFixed(2)
								
			                 } else { // 否则进行选中赋值
			                     this.active = 1;
								 this.price  = ( a + b ).toFixed(2)
								 
			                 }
							 
			    },
				
				//点选开票
				radioChangeC(evtb){
					let a = parseFloat(this.price); 
					let b = parseFloat(this.tax_money); //税率
				    if (this.aaa == 4) { // 如果已经选中，则取消选中
									this.aaa = null;
									this.price =(a-b).toFixed(2)
									this.invoice = ''
									this.showInvoice = false
				               } else { // 否则进行选中赋值
							   
									this.aaa = 4;
									this.price = (a+b).toFixed(2)
									this.showInvoice = true
				               }
				  },
				 
				  
		}
	}
</script>

<style lang="scss" scoped>
	page {
		padding-bottom: 120rpx;
	}

	.head-address1 {
		display: flex;
		align-items: center;
		padding: 20rpx 35rpx;
		background: $uni-model-color;
		justify-content: space-between;

		.address-box {
			.adres-txt-1 {
				color: #FFFFFF;
				font-size: 22rpx;
				padding: 0 8rpx;
				border-radius: 6rpx;
				margin-right: 15rpx;
				background: $uni-text-color;
			}

			.adres-txt-2 {
				font-size: 28rpx;
				letter-spacing: 2rpx;
			}

			.adres-txt-3 {
				margin: 14rpx 0;
				font-size: 34rpx;
				font-weight: bold;
			}

			.adres-txt-4,
			.adres-txt-5 {
				font-size: 28rpx;
				margin-right: 20rpx;
			}
		}
	}

	.up-class {
		padding-bottom: 120rpx;

		.head-address {
			display: flex;
			align-items: center;
			padding: 20rpx 35rpx;
			justify-content: space-between;

			.address-box {
				.adres-txt-1 {
					color: #FFFFFF;
					padding: 0 8rpx;
					font-size: 22rpx;
					border-radius: 6rpx;
					margin-right: 15rpx;
					background: $uni-text-color;
				}

				.adres-txt-2 {
					font-size: 26rpx;
					letter-spacing: 2rpx;
					color: $uni-text-color-placeholder;
				}

				.adres-txt-3 {
					margin: 10rpx 0;
					font-size: 32rpx;
					font-weight: bold;
					letter-spacing: 1rpx;
				}

				.adres-txt-4,
				.adres-txt-5 {
					font-size: 26rpx;
					margin-right: 20rpx;
					color: $uni-text-color-placeholder;
				}
			}
		}

		.bot-btn {
			bottom: 0;
			width: 750rpx;
			position: fixed;
			text-align: center;
			padding: 20rpx 150rpx;

			.btn-box {
				width: 450rpx;
				color: #FFFFFF;
				padding: 20rpx 0;
				font-size: 28rpx;
				background: #ff914d;
				letter-spacing: 2rpx;
				border-radius: 50rpx;

				text {
					margin-left: 4rpx;
				}
			}
		}
	}

	.cart-list {
		padding: 0 15rpx;

		.cart-list-box {
			margin-top: 20rpx;
			padding: 25rpx 20rpx;
			border-radius: 20rpx;
			background: $uni-model-color;

			.list-box-head {
				display: flex;
				align-items: center;

				image {
					width: 36rpx;
					height: 36rpx;
					margin-right: 8rpx;
				}

				text {
					font-size: 28rpx;
					font-weight: bold;
					letter-spacing: 1rpx;
				}
			}

			.list-box-cont {
				display: flex;
				margin-top: 30rpx;

				.listbox-cont-left {
					display: flex;
					align-items: center;

					image {
						// flex-shrink: 1;
						width: 200rpx;
						height: 200rpx;
						border-radius: 10rpx;
						border: 2rpx solid $uni-text-color;
					}
				}

				.listbox-cont-right {
					width: 482rpx;
					display: flex;
					margin-left: 20rpx;
					flex-direction: column;
					justify-content: space-between;

					.cont-right-top {
						.cont-tit {
							overflow: hidden;
							font-size: 28rpx;
							font-weight: bold;
							letter-spacing: 1rpx;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
						}

						.cont-spec {
							font-size: 22rpx;
							border-radius: 8rpx;
							margin: 14rpx 0 35rpx 0;
							color: $uni-text-color-grey;
							// background-color:rgba(0, 0, 0, .1);
						}
					}

					.cont-right-bot {
						display: flex;
						color: $uni-text-color;
						justify-content: space-between;

						.cont-price-box {
							.price-icon {
								font-size: 24rpx;
							}

							.price-tit {
								font-size: 34rpx;
								font-weight: bold;
							}
						}
					}
				}
			}
		}
	}

	.msg-box {
		display: flex;
		padding: 25rpx 20rpx;
		font-size: 28rpx;
		margin-top: 20rpx;
		align-items: center;
		background: $uni-model-color;

	}

	.pay-box {
		font-size: 28rpx;
		margin-top: 40rpx;
		background: $uni-model-color;

		.wx-box {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.wx-pay {
				display: flex;
				padding: 25rpx 20rpx;
				align-items: center;

				image {
					width: 50rpx;
					height: 50rpx;
				}

				text {
					margin-left: 10rpx;
				}
			}
		}
	}

	.bot-btn {
		bottom: 0;
		width: 750rpx;
		display: flex;
		position: fixed;
		align-items: center;
		padding: 20rpx 0 40rpx 0;
		background: $uni-model-color;
		justify-content: space-between;

		.bot-left {
			color: #f18b49;
			padding-left: 20rpx;

			.left-txt-1 {
				font-size: 40rpx;
			}
		}

		.bot-rigth {
			padding-right: 20rpx;

			text {
				color: #FFFFFF;
				font-size: 26rpx;
				font-weight: bold;
				background: #ff914d;
				letter-spacing: 2rpx;
				padding: 20rpx 50rpx;
				border-radius: 50rpx;
			}
		}
	}

	.pro-detai-bot {
		color: #ccc;
		font-size: 6rpx;
	}
	.uni-radio .uni-radio-input{
		    width: 15px!important;
		    height: 15px;
	}
</style>
